<template>
  <div @click.stop="" class="importBox">
      <div :class="{'im_box':is_show_importBoxBot}" @click="op_layer()" class="importBoxTop">
        重新导入
      </div>
      <div v-show="is_show_importBoxBot" :class="[pos]" class="importBoxBotBg">
        <div class="importBoxBot">
          <div class="importBoxBotMain">
            <div class="im_top">
              <img src="@/assets/img/itemList/warn.png" alt="">
              <span>
                提示
              </span>
            </div>
            <dl class="im_bot">
              <dt @click="setVis(false)">
                取消
              </dt>
              <dd @click="getFile()">
                重新导入
              </dd>
            </dl>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        is_show_importBoxBot:false
      }
    },
    props:['pos','layer'],
    methods:{
      op_layer(){
        let that=this;
        if(that.layer){
          that.$bus.$emit("toastEvent","自动下单中，禁止其他操作",0);
        }else{
          that.setVis(true);
        }
      },
      setVis(val){
        let that=this;
        console.log("val:",val);
        console.log("有");
        if(val){
          that.is_show_importBoxBot=!that.is_show_importBoxBot;
        }else{
          that.is_show_importBoxBot=val;
        }
      },
      // https://blog.csdn.net/weixin_46476460/article/details/108731743?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-108731743-blog-125235360.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3
      getFile(e){
        let that=this;
        that.setVis(false);
        that.$parent.getImportBox();
      }
    }
  }
</script>

<style lang="less" scoped>
  .importBox{
    position: relative;
    .importBoxTop{
      border: 1px solid #d9d9d9;
      background-color: #fff;
      height: 32px;
      line-height: 32px;
      padding: 0 16px;
      color: #595959;
      font-size: 14px;
      cursor: pointer;
    }

    .importBoxTop:hover{
      color: #ff8040;
      border-color: #ff8040;
    }

    .im_box{
      color: #ff8040;
      border-color: #ff8040;
    }

    .importBoxBotBg{
      position: absolute;
      top: 32px;
      z-index: 3;
      width: 154px;
      padding:10px 0;
      .importBoxBot{
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 0 6px #ddd;
        .importBoxBotMain{
          padding:10px;
          .im_top{
            display: flex;
            flex-direction: row;
            align-items: center;
            img{
              display: block;
              width: 15px;
              height: 15px;
            }
            span{
              display: block;
              height: 20px;
              line-height: 20px;
              color: #666;
              font-size: 14px;
              margin-left: 5px;
            }
          }

          .im_bot{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 6px;
            dt,dd{
              height: 24px;
              line-height: 24px;
              border: 1px solid #efefef;
              padding: 0 10px;
              font-size: 13px;
              cursor: pointer;
              color: #333;
            }
            dd{
              margin-left: 10px;
              background-color: #ff8040;
              color: #fff;
              position: relative;
              input{
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                z-index: 1;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .left{
      left: 0;
    }
    .left:after{
      content: "";
      position: absolute;
      top: 6px;
      left: 20px;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 3px;
      transform: rotateZ(-135deg);
      box-shadow: 2px 2px 5px #ddd;
    }
    .right{
      right: 0;
    }
    .right:after{
      content: "";
      position: absolute;
      top: 6px;
      right: 20px;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 3px;
      transform: rotateZ(-135deg);
      box-shadow: 2px 2px 5px #ddd;
    }
  }
</style>
